<template>
	<view class="tui-container">
		<tui-sticky :scrollTop="scrollTop" stickyHeight="104rpx">
			<template v-slot:header>
				<view class="sticky-item">
					<picker mode="date" :value="date.value" :start="date.start" :end="date.end" fields="month" @change="bindTimeChange">
						<view class="date">{{date.value}}</view>
					</picker>
					<view class="amount">
						<view>支出 ￥{{totalExpenditure/100}}</view>
						<!-- <view>收入 ￥230.50</view> -->
					</view>
				</view>
			</template>
			<template v-slot:content>
				<!--内容 start-->
				<view v-for="(v,k) in list" :key="k">
					<view>{{k}}</view>
					<view class="list-view">
						<view class="list-item" hover-class="hover" :hover-stay-time="150" bindtap="detail" v-for="(vv,kk) in v" :key="kk" @click="updateOrDel(vv.billId,vv.money,vv.name,vv.payMode,vv.time)">
							<view class="content-box">
								<image v-if="v.img" :src="'../../static/img/pay-type/'+v.typeImg+'.png'" class="logo"></image>
								<image v-else src="../../static/img/pay-type/0.png" class="logo"></image>
								<view class="des-box">
									<view class="tit">{{vv.name}}</view>
									<view class="source">{{vv.payMode}}</view>
									<view class="time">{{time_format('Y-m',vv.time)}}</view>
								</view>
							</view>
							<view class="money add">
								￥{{vv.money/100}}
							</view>
						</view>
					</view>
				</view>
				<!--内容 end-->
			</template>
		</tui-sticky>
	</view>
</template>
<script>
	import tuiSticky from "@/components/sticky/sticky"
	import url from "../../common/url.js"
	import common from "../../common/common.js"
	
	let self=null;
	export default {
		components:{
			tuiSticky
		},
		data() {
			return {
				//时间
				date:{
					value:'',
					start:'2000-01-01',
					end:'2099-01-01'
				},
				
				list:[],
				totalExpenditure:0,
				scrollTop: 0
			}
		},
		onLoad() {
			self=this
			
			uni.showLoading({ title: '初始化中',mask:true});
			this.date.value=common.time_format('Y-m',Math.round(new Date()))
			setTimeout(()=>{
				uni.checkSession({
					success(){
						const loginInfo = uni.getStorageSync('login_info');
						console.log(loginInfo)
						if(loginInfo){
							common.userInfo=loginInfo
							uni.hideLoading()
							self.init()
						}else{
							uni.hideLoading()
							self.login()
						}
					},
					fail(){
						self.fail()
					}
				})
			},500)
		},
		onTabItemTap(){
			if(common.userInfo!==null){
				this.init();
			}else{
				uni.showToast({
				    title: '登陆后可体验所有功能哦！~~',
				    duration: 3000,
					icon:'none'
				})
			}
		},
		methods: {
			init(){
				const data={
					key:common.userInfo.key,
					date:this.date.value
				}
				
				common.http({
					url:url.statisticsIndex,
					data:data,
					ok(res){
						if(res.totalExpenditure<=0){
							uni.showToast({
							    title: '亲你这个月没有记录哦',
							    duration: 2000,
								icon:'none'
							});
						}
						
						self.list=res.list
						self.totalExpenditure=res.totalExpenditure
						
						self.isOne=false
						uni.hideLoading()
					},
					no(res){
						if(res.code===405){
							//返回405说明有人在其他地方登陆了，删除登录信息
							uni.removeStorageSync('login_info')
							common.userInfo=null
							console.log(common.userInfo)
							uni.hideLoading()
							uni.showModal({
							    title: '警告',
							    content: '登录信息已失效请从新登录！',
								showCancel:false,
							});
						}else{
							uni.hideLoading()
							uni.showModal({
							    title: '警告',
							    content: res.data.msg,
								showCancel:false,
							});
						}
					}
				});
			},
			login(){
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    // 登录成功,获取个人信息
					self.getInfo(loginRes.code)
				  },
				  fail(){
					self.fail()
				  }
				});
			},
			getInfo(code){
				uni.getUserInfo({
					provider: 'weixin',
					success: (detail) => {
						let userInfo=detail.userInfo
						userInfo.nickName=common.utf16toEntities(userInfo.nickName)
						
						const data={
							encryptedData:detail.encryptedData,
							userInfo:JSON.stringify(detail.userInfo),
							code:code
						}
								
						common.http({
							url:url.loginSetUser,
							data:data,
							ok(data){
								uni.setStorageSync('login_info',{key:data,isAnonymous:0})
								common.userInfo={key:data,isAnonymous:0},
								uni.hideLoading()
								self.init()
							}
						})
					},
					fail: (error) => {
						uni.hideLoading()
						self.fail()
					}
				});
			},
			fail(){
				uni.removeStorageSync('login_info')
				uni.showToast({
				    title: '登陆后可体验所有功能哦！~~',
				    duration: 3000,
					icon:'none'
				})
			},
			bindTimeChange(e) {
				this.date.value = e.detail.value
				
				this.init()
			},
			time_format(str,t){
				return common.time_format(str,t*1000);
			},
			updateOrDel(billId,money,payType,payMode,date) {
				uni.showActionSheet({
				    itemList: ['修改', '删除'],
				    success: function (res) {
				        if(res.tapIndex==0){
							//修改
							uni.navigateTo(
								{
									url:'/pages/record-number/record-number?bill_id='+billId+'&money='+money+'&payType='+payType+'&payMode='+payMode+'&date='+date
								}
							);
						}else{
							common.http({
								url:url.recordDel,
								data:{billId:billId,key:common.userInfo.key},
								ok(data){
									uni.hideLoading()
									uni.showToast({
									    title: '删除成功',
									    duration: 1000
									});
									self.init()
								}
							})
						}
				    }
				});
			}
		},
		//页面滚动执行方式
		onPageScroll(e) {
			this.scrollTop= e.scrollTop
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tips {
		background: #fff;
		padding: 50rpx 34rpx;
		color: #555;
		font-size: 24rpx;
		line-height: 42rpx;
		position: relative;
	}

	.tips::before {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	/* .sticky-container{
 position: relative;
} */
	/* sticky 容器 start */
	.sticky-item {
		width: 100%;
		height: 104rpx;
		padding: 20rpx 30rpx;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	/* sticky 容器 end */

	.date {
		height: 54rpx;
		font-size: 28rpx;
		background: #fff;
		padding: 0 28rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		/* box-shadow: 0 0 1rpx #7A7A7A; */
	}

	.date::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1rpx solid #eaeef1;
		border-radius: 60rpx;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
	}

	.amount {
		text-align: right;
		color: #7A7A7A;
		font-size: 24rpx;
	}

	.list-view {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.list-view::after {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	.list-item {
		width: 100%;
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.list-item::after {
		left: 120rpx
	}

	.item-last::after {
		left: 0 !important
	}

	.content-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		flex-grow: 1
	}

	.des-box {
		min-height: 130rpx;
		padding-left: 28rpx;
		box-sizing: border-box;
		vertical-align: top;
		color: #333;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tit {
		font-size: 32rpx;
		max-width: 420rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.time {
		color: #888
	}

	.money {
		font-size: 38rpx;
		font-weight: 500;
		color: #000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}

	.add {
		color: #5677FC !important;
	}
</style>
